<script setup lang="ts">
import { computed } from 'vue'
import { theme } from 'ant-design-vue'

interface Props {
  logoSrc?: string
  title?: string
}

const props = withDefaults(defineProps<Props>(), {
  logoSrc: './logo.svg',
  title: 'CodeWin'
})

const { token } = theme.useToken()

const styles = computed(() => {
  return {
    logo: {
      'display': 'flex',
      'height': '72px',
      'align-items': 'center',
      'justify-content': 'start',
      'padding': '0 24px',
      'box-sizing': 'border-box',
    },
    'logo-img': {
      width: '24px',
      height: '24px',
      display: 'inline-block',
    },
    'logo-span': {
      'display': 'inline-block',
      'margin': '0 8px',
      'font-weight': 'bold',
      'color': token.value.colorText,
      'font-size': '16px',
    },
  } as const
})
</script>

<template>
  <div :style="styles.logo">
    <img
      :src="props.logoSrc"
      draggable="false"
      alt="logo"
      :style="styles['logo-img']"
    >
    <span :style="styles['logo-span']">{{ props.title }}</span>
  </div>
</template>